<template>
	<div class="flex_row">
		<div class="flex_col">
			<DeviceItem v-for="(item, index) in allDevices" :key="index" :device="item" />
		</div>
		<div class="flex_col" style="flex-grow: 1;">
			<el-menu mode="horizontal" router default-active="/edit">
				<el-menu-item index="/edit">编辑</el-menu-item>
				<el-menu-item index="/ctrl">远程控制</el-menu-item>
				<el-menu-item index="/firm_upload">固件上传</el-menu-item>
				<el-menu-item index="/product">商品管理</el-menu-item>
			</el-menu>
			<RouterView />
		</div>
	</div>
</template>

<script lang="ts" setup>

import DeviceItem from '@/components/DeviceItem.vue';
import { allDevices, updateDevice } from '@/service/react';
import { run } from '@/utils/ui';

async function init() {
	run(async () => {
		await updateDevice();
	});
}

init();

</script>
